<template>
  <div class="viewAll base-viewAll">
    <h3>列表</h3>

    <div class="control-box">
      <el-button-group class="ml-4">
        <el-button type="primary" icon="Plus" @click="handleAdd"
          >新建</el-button
        >
        <el-button type="primary" icon="Delete" @click="handleDelete"
          >删除</el-button
        >
        <el-button type="primary" icon="Open" @click="handleOpen"
          >开启</el-button
        >
        <el-button type="primary" icon="TurnOff" @click="handleShield"
          >屏蔽</el-button
        >
      </el-button-group>

      <el-input
        style="width: 240px"
        v-model="keyword"
        placeholder="输入产品名称搜索"
      >
        <template #append>
          <el-button @click="handleSearch" icon="Search"></el-button>
        </template>
      </el-input>
    </div>

    <el-table
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="productNum" label="产品编号" />
      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="cityName" label="出发城市" />
      <el-table-column prop="departureTime" label="出发时间" />
      <el-table-column prop="productPrice" label="产品价格" />
      <el-table-column prop="productDesc" label="产品描述" />
      <el-table-column label="状态">
        <template #default="{ row }">
          {{ row.status == 1 ? "开启" : "关闭" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="250">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleDetail(row, 'view')"
          >
            详情
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleDetail(row, 'edit')"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-box box-center">
      <el-pagination
        v-model:current-page="listQuery.page"
        v-model:page-size="listQuery.limit"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pages.default"
        :total="pages.total"
        :page-sizes="pages.pageSizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Mitt from "@/mitt/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
const emits = defineEmits(["sendData"]);

/* 模糊搜索 */
//关键词
const keyword = ref("");
//搜索
const handleSearch = () => {
  if (!keyword.value) return ElMessage.warning("用户名不能为空！");
  //调用模糊查询接口
  console.log(keyword.value);
};

/* 左上方按钮事件 */
//添加
const handleAdd = () => {
  emits("sendData", {
    showComponents: "addAndEdit",
    type: "add",
  });
};

//删除
const handleDelete = () => {
  if (!multipleSelection.value.length)
    return ElMessage.warning("请先勾选需要删除的数据！");

  ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      //调用删除接口
      ElMessage.success("删除成功！");
    })
    .catch(() => {
      ElMessage.info("取消删除！");
    });
};

//开启
const handleOpen = () => {
  if (!multipleSelection.value.length)
    return ElMessage.warning("请先勾选需要开启的数据！");
  //调用开启的接口
};

//屏蔽
const handleShield = () => {
  if (!multipleSelection.value.length)
    return ElMessage.warning("请先勾选需要屏蔽的数据！");
  //调用屏蔽的接口
};

/* 表格 */
// 表格数据
const tableData = ref([
  {
    id: "1",
    productNum: "doney-003",
    productName: "上海五日游",
    cityName: "上海",
    departureTime: "2025年1月15日11:26:42",
    productPrice: "1800",
    productDesc: "魔都我来了",
    status: "1",
  },
  {
    id: "6",
    productNum: "doney-003",
    productName: "上海五日游",
    cityName: "上海",
    departureTime: "2025年1月15日11:26:42",
    productPrice: "1800",
    productDesc: "魔都我来了",
    status: "1",
  },
  {
    id: "5",
    productNum: "doney-003",
    productName: "上海五日游",
    cityName: "上海",
    departureTime: "2025年1月15日11:26:42",
    productPrice: "1800",
    productDesc: "魔都我来了",
    status: "1",
  },
  {
    id: "4",
    productNum: "doney-003",
    productName: "上海五日游",
    cityName: "上海",
    departureTime: "2025年1月15日11:26:42",
    productPrice: "1800",
    productDesc: "魔都我来了",
    status: "1",
  },
]);

//复选框勾选的记录集合
const multipleSelection = ref([]);

//表格左侧复选框选择
const handleSelectionChange = (rows) => {
  //获取到的是选择到的数据，是一个数组
  // console.log(rows);
  //根据id去多选删除数据，把选择到的id分离出来，得到是一个数组集合
  multipleSelection.value = rows.map((item) => item.id);
  console.log(multipleSelection.value);
};

//详情
const handleDetail = (row, type) => {
  emits("sendData", {
    showComponents: "addAndEdit",
    type,
    row,
  });
};

/* 分页器 */
//请求参数
const listQuery = ref({
  //页码
  page: 1,
  //页数
  limit: 10,
});
const pageSizes = [10, 30, 50];
//分页数据
const pages = ref({
  //总条数
  total: 11,
  //默认展示每页的条数
  default: pageSizes[0],
  //下拉选择的条数列表
  pageSizes,
});

//页码改变
const handleCurrentChange = () => {
  console.log(listQuery.value.page);
  //重新获取数据，请求参数自动改变，重新调用接口即可
  //getList()
};

//页数改变
const handleSizeChange = () => {
  console.log(listQuery.value.limit);
  //重新获取数据，请求参数自动改变，重新调用接口即可
  //getList()
};

//获取初始数据
const getList = () => {
  //调用获取表格数据接口，返回过来的数据赋值给tableData
};

onMounted(() => {
  Mitt.emit("sendcrumbsInfo", { first: "产品管理", second: "全部产品" });
  getList();
});
</script>

<style lang="less" scoped></style>
